<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示服务器列表</title>
    <!--    引入js-->
    <script src="layui/layui.all.js"></script>
    <!--    引入css-->
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">实时监控</a>
</script>
</body>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 500
            , url: '/status/list' //数据接口
            , page: true //开启分页
            , toolbar: true
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            }
            , cols: [[ //表头
                {field: 'id', title: '编号', width: 80, sort: true, fixed: 'left'}
                , {field: 'cpuUsage', title: 'cpu负载', width: 120, sort: true}
                , {field: 'memoryUsage', title: '内存使用率', width: 120, sort: true}
                , {field: 'diskUsage', title: '硬盘使用率', width: 120, sort: true}
                , {field: 'serverIp', title: '服务器ip地址', width: 160, sort: true}
                , {field: 'createTime', title: '创建时间', width: 200, sort: true}
                , {
                    field: 'createTime', title: '在线/离线', width: 200,
                    templet: function (d) {
                        console.log(d.createTime); // 得到当前行数据
                        //得到当前行数据，并拼接成自定义模板
                        return getOnlineStatus(d.createTime)
                    }
                }
                , {field: 'createTime', title: '操作', width: 200,toolbar: '#barDemo'}
            ]]
        });

        function  getOnlineStatus(creteTime){
            console.log(creteTime)
            //获取当前的系统毫秒数
            let nowTime = new Date().getTime();
            let creteTimeM=new  Date(creteTime).getTime();
            let diff=(nowTime-creteTimeM)/1000;
            console.log("=============")
            console.log(diff)
            if(diff>60){
                return "<span style=\"color: orange\">离线</span>"
            }
            return "<span style=\"color: green\">在线</span>"
        }

        // 单元格工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data.serverIp)
            if(layEvent === 'detail'){
               /* layer.msg('实时监控操作');*/

                //去另外一个监控页面
                window.open("detail.html?serverIp="+data.serverIp)
            }
        });

    })
    ;
</script>
</html>
